<template>
  <!-- 阻止click事件冒泡 -->
  <div class="style-data">
    <div class="box-item">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="常规" name="1">
          <!-- d2-crud目前尚未提供修改内部data的接口,无法动态更新data -->
          <!-- 增加key参数(vue内部保留的默认参数),确保grid能动态更新!!! -->
          <!-- key变化,vue会生成一个新的dom节点,而不是在原来的dom节点上更新 -->
          <property-grid
            ref="pg1"
            :key="key1"
            my-id="1"
            :datas="props1"
            @change="onChange"
            @clickBlur="onClickBlur"
            @completeLoading="onCompleteLoading"
          />
        </el-collapse-item>
        <el-collapse-item title="图形参数" name="2">
          <property-grid
            ref="pg2"
            :key="key2"
            my-id="2"
            :datas="props2"
            @change="onChange"
            @clickBlur="onClickBlur"
            @completeLoading="onCompleteLoading"
          />
        </el-collapse-item>
        <el-collapse-item title="属性数据" name="3">
          <property-grid
            ref="pg3"
            :key="key3"
            my-id="3"
            :datas="props3"
            @change="onChange"
            @clickBlur="onClickBlur"
            @completeLoading="onCompleteLoading"
          />
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import PropertyGrid from '@/views/editor/components/property-grid'
import property from '@/mixins/property'
import observe from '@/mixins/observe'
import selection from '@/mixins/selection'
import focus from '@/mixins/focus'
import { makeDict } from '@/utils'
import { clearObject } from '@/utils/types'
import { mapActions } from 'vuex'

export default {
  name: 'PropsData',
  components: {
    PropertyGrid
  },
  mixins: [selection, observe, property, focus],
  data() {
    return {
      activeNames: ['1', '2', '3'],
      // 外部传入的数据(使用props或者vuex)
      props: {},
      // 签名
      key: 'property-grid'
    }
  },
  computed: {
    key1: function() {
      return this.key + '-traits'
    },
    key2: function() {
      return this.key + '-params'
    },
    key3: function() {
      return this.key + '-datas'
    },
    props1: function() {
      if (!this.props) return []
      else return this.props['traits'] || []
    },
    props2: function() {
      if (!this.props) return []
      else return this.props['params'] || []
    },
    props3: function() {
      if (!this.props) return []
      else return this.props['datas'] || []
    }
  },
  created() {
    // 观察者命名
    this.observerName = 'Property'
    // this.initPropertyGrid()
    // 利用当前选择集更新界面
    this.updatePickFirst()
  },
  methods: {
    ...mapActions('editor/diagram', {
      showLoading: 'showLoading'
    }),
    // 初始化property-grid
    initPropertyGrid() {
      // 生成新key
      // this.key = makeUUID()
      // 清空数组
      clearObject(this.props)
      this.props = null
      // console.log('style.vue 签名:', this.key)
    },

    onSelectionChange(parts) {
      console.log('props.vue -> onSelectionChange:', parts)
      // 显示loading(内部会修改store: editor/diagram/loading变量)
      // this.showLoading(true)
      // 触发更新观察目标事件
      this.updateSubjects(parts)
    },
    // mixins/observe.js回调
    // 观察对象发生变化
    onSubjectChange(parts) {
      console.log('props.vue -> onSubjectChange:', parts)
      if (parts !== null && parts.length > 0) {
        // 参见: mixins/property.js
        this.getProperties(parts)
      } else {
        this.initPropertyGrid()
      }
    },
    // mixins/property.js回调
    onGetProperties(parts, props) {
      console.log('style.vue --> 图元id:', parts, '图元数据:', props)
      // 初始化property-grid
      this.initPropertyGrid()
      // 填充数据
      this.props = props
    },
    onChange({ key, data, type }) {
      // 参见: mixins/property.js
      this.setProperties(this.getPropertyEntities(), makeDict(key, data))
      // console.log('props.vue onChange()函数:', {
      //   part: this.getPropertyEntities(),
      //   args
      // })
    },
    // onSelectChange(val) {
    //   const part = val
    //   this.getProperties(part)
    // },
    // 3、用户在同一页面的另外一个propertygrid中点击, 取消编辑状态
    //    响应子组件发送的customCellClick事件
    onClickBlur(myId) {
      console.log('onClickBlur（） ==> ', myId)
      if (myId === '1') {
        this.$refs.pg2.completeEdit()
        this.$refs.pg3.completeEdit()
      } else if (myId === '2') {
        this.$refs.pg1.completeEdit()
        this.$refs.pg3.completeEdit()
      } else if (myId === '3') {
        this.$refs.pg1.completeEdit()
        this.$refs.pg2.completeEdit()
      }
    },
    // 重载ocx/mixins/focus.js
    onGetFocus() {
      // console.log('onGetFocus() ==> 属性控件取消编辑状态')
      // 3个属性控件取消编辑状态
      this.$refs.pg1.completeEdit()
      this.$refs.pg2.completeEdit()
      this.$refs.pg3.completeEdit()
    },
    onCompleteLoading() {
      // 完成加载
      // const that = this
      // setTimeout(() => {
      //   // 延迟0.3s关闭loading
      //   // this.showLoading(false)
      // }, 300)
    }
  }
}
</script>
<style lang="scss">
@import '../../style/variable.scss';
.style-data {
  height: 100%;
  @import '../../style/form.scss';
  display: flex;
  flex-direction: column;
  align-items: stretch;
  // justify-items: stretch;

  .fixed-item {
    flex-grow: 0;
    height: 20px !important;
  }

  .box-item {
    flex: 1;
  }

  // .el-select {
  //   display: block !important;
  // }
}
</style>
